<template>
	<view class="exchange">
		<!-- 币种 -->
		<view class="currency">
			<view class="">火石</view>
			<view class="">人民币</view>
		</view>
		<view class="transfer_img">
			<image src="../../static/img/userCenter/conversion.png" mode=""></image>
		</view>
		<!-- 数量 -->
		<view class="number">
			<u--input placeholder="转出数量" border="none"></u--input>
			<u--input placeholder="收到数量" border="none" inputAlign="right"></u--input>
		</view>
		<!-- 余额手续费汇率 -->
		<view class="poundage">
			<view class="">余额: 333火石</view>
			<view class="">手续费：10%</view>
		</view>
		<view class="exchange_rate">
			汇率： 1火石=1人民币
		</view>
		<!-- 兑换按钮 -->
		<u-button type="primary" text="兑换" color="#f06c7a"></u-button>
		<!-- 记录 -->
		<view class="record_title">
			<view class="">兑出资产/兑入资产</view>
			<view class="">手续费/时间</view>
		</view>
		<view class="record">
			<view class="">21 / 21</view>
			<view class="">10% / 2022-2-1</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.exchange {
		padding: 40rpx;

		// 币种
		.currency {
			position: relative;
			left: 50%;
			margin-left: -25%;
			width: 50%;
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			font-size: 28rpx;
		}

		// 转换图片
		.transfer_img {
			width: 80rpx;
			height: 80rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		// 数量
		.number {
			display: flex;
			justify-content: space-between;
			margin: 40rpx;
		}

		// 余额手续费
		.poundage {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
		}

		// 汇率
		.exchange_rate {
			margin: 30rpx 0;
		}

		// 记录
		.record_title{
			margin:30rpx 0;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #999;
		}
		.record{
			display: flex;
			justify-content: space-between;
		}
	}
</style>
